<div #rootElement (keydown)="fakeInputPressed($event)" (keypress)="fakeKeyPressed($event)" tabindex="-1" autofocus>
    <div *ngIf="initialLoading.loading">
        <img src="assets/progress.gif"> Loading log list...
    </div>

    <div *ngIf="initialLoading.errorMsg" class="alert alert-danger" style="white-space: pre-wrap;">{{initialLoading.errorMsg}}</div>

    <div *ngIf="init">
        <h4>Favorites</h4>
        <div *ngIf="favorites.length === 0" id="no-favorites" class="noItems">
            No logs in favorites
        </div>

        <div *ngFor="let l of favorites" class="favorite-item" [class.not-exist]="l.size == null">
            <a href="#" (click)="favoriteClick(l.path, $event)">{{l.path}}</a>
            <span class="log-size">
                <span title="File size">{{l.size | slSize}}</span>,
                <span title="Modification time">{{l.lastModification | date : 'medium'}}</span>
            </span>
            <span class="file-non-exist">
                file not found
            </span>

            <span *ngIf="fwService.editable" class="fv-actions-block">
                <span class="fas fa-times" title="Remove from favorites" (click)="removeFromFavorites(l.path)"></span>
            </span>
        </div>

        <hr>

        <div *ngIf="showFileTree" class="dir-content-panel">
            <div *ngIf="editingCurrentDir" class="current-path-edited">
                <div class="input-group">
                    <input id="path-input" #pathInput type="text" class="form-control" placeholder="Current path"
                           [(ngModel)]="editedCurrentDirValue" (keydown)="pathInputKeyDown($event)"
                           aria-label="Current path" aria-describedby="basic-addon2">

                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" name="open-button"
                                (click)="openEditedPath()">
                            Open
                        </button>
                        
                        <button class="btn btn-outline-secondary" type="button" name="cancel-button"
                                (click)="cancelEditing()">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>

            <div *ngIf="!editingCurrentDir" class="current-path">
                <div class="edit-icon" title="Edit path" (click)="startPathEditing()">
                    <i class="far fa-edit"></i>
                </div>

                <span *ngIf="currentDirItems.length === 0" class="path-item">&nbsp;</span>

                <span *ngFor="let path of currentDirItems; let idx = index" class="path-item"><a href="#" (click)="directoryNameClick(constructPathFromPrefix(idx))">{{path}}</a><span class="path-separator"><span *ngIf="!path.endsWith('/')">/</span></span></span>
            </div>

            <div class="search-pane">
                <span class="tool-button" [class.tool-button-pressed]="filterOpened"
                      title="Search" (click)="toggleSearch()"><i class="fas fa-search"></i></span>
                &nbsp;
                <input #searchField type="text" name="typedText" aria-describedby="basic-addon2"
                       class="filter-input"
                       [style.visibility]="filterOpened ? 'visible' : 'hidden'"
                       [(ngModel)]="typedText" (ngModelChange)="filterChanged()">
            </div>

            <img *ngIf="dirContentLoading.loading" src="assets/progress.gif">

            <div *ngIf="dirContentLoading.errorMsg" class="alert alert-danger" style="white-space: pre-wrap;">{{dirContentLoading.errorMsg}}</div>

            <div *ngIf="dirContent?.error" class="alert alert-danger" style="white-space: pre-wrap;">{{dirContent.error}}</div>

            <table *ngIf="dirContent?.content" class="file-list">
                <tr *ngFor="let fi of visibleDirItems" [class.selected]="selectedPath === fi.item.path"
                    class="file-list-item"
                    (click)="select($event, fi.item.path)" (dblclick)="dblClick(fi.item, $event)">
                    <td><img [src]="fi.item.icon" height="16" width="16"></td>

                    <td class="name" [innerHTML]="fi.nameHtml"></td>

                    <td>
                        <span *ngIf="fi.item.size != null" class="file-attr" title="{{fi.item.size}} bytes">
                            {{fi.item.size | slSize}}
                        </span>
                    </td>
                    <td>
                        <span *ngIf="fi.item.modificationTime" class="file-attr" title="Last modification time">
                            {{fi.item.modificationTime | date : 'yyyy-MM-dd HH:mm:ss'}}
                        </span>
                    </td>
                </tr>
            </table>

            <div *ngIf="dirContent?.content?.length === 0" class="noItems">&lt;the folder is empty&gt;</div>

            <div *ngIf="dirContent?.content?.length && visibleDirItems.length === 0" class="noItems">
                &lt;no file matches the filter&gt;
            </div>
        </div>
    </div>
</div>